<!-- packagrecordmgr打包记录 -->
<template>
  <a-card
    :bordered="false"
    :body-style="{ 'padding-bottom': '0px' }"
    :style="{ margin: '10px', paddingBottom: '0px' }"
  >
    <a-form
      ref="searchFormRef"
      name="advanced_search"
      :model="searchFormState"
      class="ant-advanced-search-form"
    >
      <a-row :gutter="24" v-show="advanced">
        <a-col :span="5">
          <a-form-item label="出厂编码" name="FacNo">
            <a-input
              v-model:value="searchFormState.FacNo"
              placeholder="请输入出厂编码"
              @keyup.enter="tableRef.refresh(true)"
            />
          </a-form-item>
        </a-col>

        <a-col :span="9">
          <a-form-item label="打包更新时间" name="time">
            <a-range-picker
              v-model:value="searchFormState.time"
              showTime
              :format="dayFormat"
            />
          </a-form-item>
        </a-col>
        <a-col :span="7">
          <a-form-item label="托盘标识" name="PrinterCode">
            <a-input
              v-model:value="searchFormState.PrinterCode"
              placeholder="请输入托盘标识"
              @keyup.enter="tableRef.refresh(true)"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="5">
          <a-form-item label="打包人ID" name="UserID">
            <a-input
              v-model:value="searchFormState.UserID"
              placeholder="请输入打包人ID"
              @keyup.enter="tableRef.refresh(true)"
            />
          </a-form-item>
        </a-col>
        <a-col :span="5">
          <a-form-item label="打包状态" name="HasPackage">
            <a-select
              v-model:value="searchFormState.HasPackage"
              style="width: 100%"
              placeholder="请选择打包状态"
              :options="[
                {
                  value: -1,
                  label: '全部',
                },
                {
                  value: 0,
                  label: '未打包',
                },
                {
                  value: 1,
                  label: '已打包',
                },
              ]"
            ></a-select>
          </a-form-item>
        </a-col>

        <a-col :span="12">
          <a-button
            class="mr10"
            type="primary"
            @click="tableRef.refresh(true)"
            v-show="hasRole(route.meta.RolePower)"
            >查询</a-button
          >
          <a-button
            class="xn-mg08"
            @click="reset"
            v-show="hasRole(route.meta.RolePower)"
            >重置</a-button
          >
          <a @click="toggleAdvanced" style="margin-left: 8px">
            {{ advanced ? "收起" : "展开" }}
            <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
          </a>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
  <a-card :bordered="false" :style="{ margin: '10px' }">
    <s-table
      ref="tableRef"
      :columns="columns"
      :data="loadData"
      :alert="options.alert.show"
      bordered
      :row-key="(record) => record.ID"
      :tool-config="toolConfig"
      :row-selection="options.rowSelection"
      :scroll="{ x: 'max-content' }"
    >
      <template #operator>
        <a-space>
          <a-button
            type="primary"
            @click="exportData"
            v-show="hasRole(route.meta.RolePower)"
          >
            <template #icon><ToTopOutlined /></template>
            导出
          </a-button>
          <!--  <xn-batch-button
                    buttonName="批量删除"
                    icon="DeleteOutlined"
                    buttonDanger
                    :selectedRowKeys="selectedRowKeys"
                    @batchCallBack="deleteBatchModule"
                  /> -->
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'UserID'">
          <div v-if="record.UserID == 0">自动检测</div>
          <div v-else>{{ record.UserID }}</div>
        </template>
        <template v-if="column.dataIndex === 'PackStatus'">
          <a-tag color="default" v-if="record.PackStatus == 0">
            <template #icon>
              <clock-circle-outlined />
            </template>
            未打包
          </a-tag>
          <a-tag color="success" v-else-if="record.PackStatus == 1">
            <template #icon>
              <check-circle-outlined />
            </template>
            已打包
          </a-tag>
        </template>
        <template v-if="column.dataIndex === 'PackUpdateTime'">
          {{ transitionTime(record.PackUpdateTime) }}
        </template>
      </template>
    </s-table>
  </a-card>
</template>
        
    <script setup name="packagrecordmgr">
import packagrecordmgrApi from "@/api/productManagement/packagrecordmgrApi";
import { cloneDeep } from "lodash-es";
import { message } from "ant-design-vue";

import {
  transitionTime,
  getPreviousMonthDateTime,
  getCurrentDateTime,
} from "@/utils/time.js";
import { ref } from "vue";
import dayjs from "dayjs";
import { useRoute } from "vue-router";
const route = useRoute();
// 查询区域显示更多控制
const advanced = ref(true);
const toggleAdvanced = () => {
  advanced.value = !advanced.value;
};
const dayFormat = "YYYY/MM/DD HH:mm:ss";

const searchFormState = ref({
  ID: 0,
  PrinterCode: "",
  StartTime: "",
  EndTime: "",
  FacNo: "",
  UserID: 0,
  HasPackage: -1,
  time: [
    dayjs(getPreviousMonthDateTime(), dayFormat),
    dayjs(getCurrentDateTime(), dayFormat),
  ],
});
const formRef = ref();
const searchFormRef = ref();
const tableRef = ref();
const toolConfig = {
  refresh: true,
  height: true,
  columnSetting: false,
  striped: false,
};
const columns = [
  {
    title: "出厂编码",
    dataIndex: "FacNo",
    align: "center",
    fixed: "left",
  },
  {
    title: "是否打包",
    dataIndex: "PackStatus",
    align: "center",
  },
  {
    title: "打包时间",
    dataIndex: "PackUpdateTime",
    align: "center",
  },
  {
    title: "打包人",
    dataIndex: "PackUserName",
    align: "center",
  },
  /* {
    title: "打包人ID",
    dataIndex: "PackUserID",
    align: "center",
  }, */

  {
    title: "产品型号",
    dataIndex: "PMName",
    align: "center",
  },
  {
    title: "批次",
    dataIndex: "PBName",
    align: "center",
  },
  {
    title: "订单编号",
    dataIndex: "PBNo",
    align: "center",
  },
  {
    title: "托盘标识",
    dataIndex: "PrinterCode",
    align: "center",
  },

  //   {
  //     title: "操作",
  //     dataIndex: "action",
  //     align: "center",
  //     width: "200px",
  //     fixed: "right",
  //   },
];
// 列表选择配置
const options = {
  alert: {
    show: false,
    clear: () => {},
  },
};
let searchAndExportFormParam = ref({});
const loadData = (parameter) => {
  const searchFormParam = cloneDeep(searchFormState.value);
  if (JSON.stringify(searchFormParam.time) != "[]") {
    searchFormParam.StartTime = dayjs(searchFormParam.time[0]).format(
      dayFormat
    );
    searchFormParam.EndTime = dayjs(searchFormParam.time[1]).format(dayFormat);
  } else {
    searchFormParam.StartTime = getPreviousMonthDateTime();
  }
  delete searchFormParam.time;

  // 把查询条件保存到导出条件中
  searchAndExportFormParam.value = searchFormParam;
  return packagrecordmgrApi
    .getProductPackageRecords(Object.assign(parameter, searchFormParam))
    .then((res) => {
      return res.Data;
    });
};
// 重置
const reset = () => {
  searchFormRef.value.resetFields();
  tableRef.value.refresh(true);
};

const exportData = () => {
  const hide = message.loading("正在导出数据，请稍后...", 0);

  packagrecordmgrApi
    .exportOutProductPackageRecords(searchAndExportFormParam.value)
    .then((res) => {
      if (!res.Result) {
        hide();
        message.error("导出失败");
        return;
      }
      hide()
      message.success("导出成功,即将开始下载");
      let a = document.createElement("a");
      let downUrl =
        import.meta.env.VITE_API_BASEURL + "/ExportFile/" + res.Data;
      if (downUrl.includes("/ntmgrwebws.asmx")) {
        downUrl = downUrl.replace("/ntmgrwebws.asmx", "");
      }
      a.href = downUrl;
      a.download = res.Data;
      a.click();
      a = null;
    })
    .catch(() => {
      hide();
      message.error("导出失败");
    });
};
</script>
        